<template>
  <view id="catee">
    <view class="cate" v-if="!showMask">
      <view :class="cateId == 0 ? 'active item' : 'item'" @click="cateTab(0)" :style="`font-size:${fontSize}`">全部</view>
      <view class="cateBoxShow">
        <scroll-view scroll-x="true" :scroll-into-view="scrollInto" scroll-with-animation>
          <view class="cateBoxShowCon">
            <block v-for="(item, index) in cateList" :key="index">
              <view :class="[cateId == item.id ? 'active item' : 'item', 'classId' + item.id]" @click="cateTab(item.id)"
                :id="'tab' + item.id" :style="`font-size:${fontSize}`">{{ item.title }}
              </view>
            </block>
          </view>
        </scroll-view>
      </view>
      <view class="showMore" v-if="cateList.length > 0 && showAllbtn && isShowIcon">
        <u-icon name="https://ossresource.miyingbl.com/uploads/20240323/f3aec46ddcf26c787d6fdedc5df13aff.png"
          @click="showAll(true)"></u-icon>
      </view>
    </view>
    <view class="cate cate1" v-else>
      <view v-if="isShowAll" :class="cateId == 0 ? 'active item' : 'item'" @click="cateTab(0)" :style="`font-size:${fontSize}`">全部</view>
      <view class="cateBox">
        <block v-for="(item, index) in cateList" :key="index">
          <view :class="cateId == item.id ? 'active item' : 'item'" @click="cateTab(item.id)"
            :style="`font-size:${fontSize}`">{{ item.title }}
          </view>
        </block>
      </view>
      <view class="showMore" v-if="showMask">
        <u-icon name="https://ossresource.miyingbl.com/uploads/20240330/h-bl-app/1711811531045"
          @click="showAll(false)"></u-icon>
      </view>
    </view>
  </view>
</template>
<script setup>
  import {
    useMemberStore
  } from '@/stores'
  import {
    nextTick,
    ref,
    onMounted,
    computed,
    watch
  } from 'vue'
  import {
    onReady,
    onShow
  } from '@dcloudio/uni-app'
  const emit = defineEmits(['cateTabGet', 'showMask'])
  const props = defineProps({
    cateList: {
      type: Array,
      default: () => [],
    },
    // 是否显示向下箭头
    isShowIcon: {
      type: Boolean,
      default: true,
    },
    isShowAll: {
      type: Boolean,
      default: true,
    },
    radiusValue: {
      type: String,
      default: `30rpx`,
    },
    fontSize: {
      type: String,
      default: `24rpx`,
    },
  })
  const classId = ref('classId0')
  const showAllbtn = ref(false)
  const showMask = ref(false)
  const cateId = ref(0)
  const scrollInto = ref('tab0')
  async function cateTab(id) {
    // console.log(id)

    cateId.value = id
    showMask.value = false
    nextTick(() => {
      scrollInto.value = 'tab' + id
    })
    if (id == 0) {
      nextTick(() => {
        scrollInto.value = 'tab' + props.cateList[0]?.id
      })
    }
    emit('cateTabGet', cateId.value)
    emit('showMask', false)
  }
  async function showAll(e) {
    if (!e) {
      showMask.value = false
      emit('showMask', false)
    } else {
      showMask.value = true
      emit('showMask', true)
    }
  }

  const refresh = () => {
    showMask.value = false
    cateId.value = 0
    nextTick(() => {
      nextTick(() => {
        scrollInto.value = 'tab' + props.cateList[0]?.id
      })
      emit('cateTabGet', cateId.value)
    })
  }

  watch(
    () => props.cateList,
    (newVal, oldVal) => {
      if (newVal.length > 0) {
        classId.value = 'classId' + newVal[newVal.length - 1].id
      }
      nextTick(() => {
        getHeight()
        getWidth()
      })
    }, {
      immediate: true,
    },
  )

  const cateBoxShowConWidth = ref(0)
  const getHeight = () => {
    uni
      .createSelectorQuery()
      .select('.' + classId.value)
      .boundingClientRect((rect) => {
        // console.log(rect)
        if (rect) {
          let right = rect.right - 64
          if (right > cateBoxShowConWidth.value) {
            showAllbtn.value = true
          } else {
            showAllbtn.value = false
          }
        }
      })
      .exec()
  }
  const getWidth = () => {
    uni
      .createSelectorQuery()
      .select('.cateBoxShow')
      .boundingClientRect((rect) => {
        // console.log(rect)
        if (rect) {
          cateBoxShowConWidth.value = rect.width
        }
      })
      .exec()
  }
  defineExpose({
    refresh,
    showAll,
  })
</script>

<style lang="scss" scoped>
  #catee {
    position: relative;
  }

  .cate {
    display: flex;
    padding: 0 30rpx;
    align-items: flex-start;
    position: relative;
    z-index: 99999;

    .item {
      padding: 0 12rpx;
      background: #f6f6f6;
      border-radius: 8rpx;
      margin-right: 20rpx;
      font-size: 24rpx;
      color: #333;
      display: inline-block;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      border: 1rpx solid #f6f6f6;
      line-height: 50rpx;

      &.active {
        background: #fff0ea;
        border-radius: 8rpx;
        border: 1rpx solid #e19e00;
        box-sizing: border-box;
        line-height: 50rpx;
        color: #e19e00;
      }
    }

    .radiusValue {
      border-radius: 30rpx !important;
    }

    .showMore {
      position: absolute;
      top: 10rpx;
      right: 15rpx;
    }

    .cateBox {
      flex: 1;
    }

    .cateBoxOver {
      height: 55rpx;
      overflow: hidden;
    }

    .cateBoxShow {
      width: 570rpx;
    }

    .cateBoxShowCon {
      white-space: nowrap;
    }
  }

  .cate1 {
    // position:absolute;
    // top:0;
    // left:0;
    // width:750rpx;
    // box-sizing:border-box;
    // background: linear-gradient(180deg, #FFE39E 0%, #FFFFFF 60%, #FFFFFF 100%);
  }
</style>
